import {
  Form,
  FormLayout,
  TextField,
  Button,
  Checkbox,
  Toast,
  Frame,
  Page,
} from "@shopify/polaris";
import { useState, useCallback } from "react";

import { PostloginApi } from "../../api/login/";
import { ManagedStoreMajor } from "@shopify/polaris-icons";

import styled from "./index.module.less";

function FormWithoutNativeValidationExample() {
  //表单数据
  const [email, setEmail] = useState("admin@comfyideals.com");
  const [password, setPassword] = useState("shenshaojie");

  const handlePasswordChange = useCallback(
    (value: string) => setPassword(value),
    []
  );
  const handleEmailChange = useCallback((value: string) => setEmail(value), []);

  const [newsletter, setNewsletter] = useState(false);

  const handleNewsLetterChange = useCallback(
    (value: boolean) => setNewsletter(value),
    []
  );

  const handleSubmit = useCallback(() => {
    PostloginApi({
      email: email,
      method: "login.business.user",
      password: password,
      platform: "business",
      store_locale: "en_US",
    }).then((res) => {
      console.log(res);
      const { status, message, data } = res;
      if (status === 200) {
        localStorage.setItem("login", data);
        window.location.href = "/";
        alert("登录成功");
      } else {
        alert(message);
      }
    });
  }, []);

  return (
    <div className={styled.box}>
      <div className={styled.box1}>
        <div className={styled.wuyong}></div>
        <div className={styled.login}>
          <div className={styled.top}>
            <div className={styled.icon}>
              <div className={styled.img}>
                <img
                  src=""
                  alt=""
                />
              </div>
            </div>
            <div className={styled.title}>登录您的商店</div>
          </div>
          <Form noValidate onSubmit={handleSubmit}>
            <FormLayout>
              <div className={styled.ipt}>
                <TextField
                  value={email}
                  onChange={handleEmailChange}
                  label="Email"
                  type="email"
                  autoComplete="off"
                />
              </div>
              <div className={styled.ipt1}>
                <TextField
                  value={password}
                  onChange={handlePasswordChange}
                  label="Password"
                  type="password"
                  autoComplete="off"
                />
              </div>
              <div className={styled.ipt1}>
                <Checkbox
                  label="保持登录"
                  checked={newsletter}
                  onChange={handleNewsLetterChange}
                />
              </div>
              <div className={styled.ipt2}>
                <Button submit fullWidth primary size="large">
                  登录
                </Button>
              </div>
            </FormLayout>
          </Form>
        </div>
      </div>
    </div>
  );
}
export default FormWithoutNativeValidationExample;
